<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D_HoverEffect</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            padding-top: 40px;
        }
        .card{
            width: 200px;
            border-radius: 10px;
            transition: 0.3s;
            transform: perspective(500px)  rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
        }
        .card img{
            border-radius: inherit;
            width: 100%;
        }
        .card:hover{
            box-shadow: -3px -3px 10px #54a29e,3px 3px 10px #a79d66;
        }
    </style>
</head>
<body>
    <div class="card">
        <img src="https://picsum.photos/200/300?1" alt="">
    </div>
    <script>
        const card = document.querySelector('.card')
        const yRange = [-10,10];
        const xRange = [-10,10];
        function getRotate(range,value,max){
            return (value / max)*(range[1]-range[0])+range[0];
        }
        card.onmousemove=(e)=>{
            const {offsetX,offsetY}=e;
            const {offsetWidth,offsetHeight}=card;
            const ry = - getRotate(yRange,offsetX,offsetWidth);
            const rx = getRotate(xRange,offsetY,offsetHeight);
            card.style.setProperty('--rx',`${rx}deg`);
            card.style.setProperty('--ry',`${ry}deg`);
        }
        card.onmouseleave=(e)=>{
            card.style.setProperty('--rx',`0deg`);
            card.style.setProperty('--ry',`0deg`);
        }
    </script>
</body>
</html>
